<template>
  <view class="addr-box font14">
    <ul>
      <li class="flex-box">
        <p class="label">联系人</p>
        <input maxlength="50" class="flex-1 input" v-model="addr.custName" placeholder="请输入姓名">
        <i class="close" hover-calss="hover-close" @tap="clearInput('custName')">×</i>
      </li>
      <li class="flex-box">
        <p class="label">手机号</p>
        <input maxlength="50" class="flex-1 input" type="number" v-model="addr.phone" placeholder="请输入手机号">
        <i class="close" hover-calss="hover-close" @tap="clearInput('phone')">×</i>
      </li>
      <li class="flex-box">
        <p class="label">地区</p>
        <div class="flex-1 input">
          <picker
            mode="multiSelector"
            @columnchange="columnChange"
            @change="regionChange"
            :range="regionRange"
            :value="region"
            range-key="areaName">
            <p class="input" :class="{ muted:!areaValue}">{{areaValue||'请选择地区'}}</p>
          </picker>
        </div>
      </li>
      <!-- <li class="flex-box">
        <p class="label">服务地址</p>
        <i class="icon icon-address" @tap="chooseLocation"></i>
        <input maxlength="50" class="flex-1 input" v-model="addr.areaCode" placeholder="请输入服务地址">
        <i class="close" hover-calss="hover-close" @tap="clearInput('areaCode')">×</i>
      </li> -->
      <li class="flex-box">
        <p class="label">详细地址</p>
        <input maxlength="50" class="flex-1 input" v-model="addr.address" placeholder="请输入详细地址">
        <i class="close" hover-calss="hover-close" @tap="clearInput('address')">×</i>
      </li>
      <!-- <li class="flex-box">
        <p class="label">设为默认</p>
        <switch :checked="idDefaultStatus" @change="switchChange" />
      </li> -->
    </ul>
    <div class="btn-full-box">
      <button class="btn-full" :loading="loading" @tap="saveAddr">保存</button>
    </div>
  </view>
</template>
<script>
import saveAddress from '@/interface/address/saveAddress'
import getAddress from '@/interface/address/getAddress'
import getAreaList from '@/interface/address/getAreaList'
import valid from '@/utils/valid'

export default {
  components: {},
  data () {
    return {
      addr: {
        custName: '',
        phone: '',
        address: '',
        defaultStatus: '1'
      },
      isEditStatus: false,
      regionRange: [[], [], []],
      region: [],
      areaValue: '',
      loading: false
    }
  },
  // computed: {
  //   idDefaultStatus () {
  //     return this.addr.defaultStatus === '0'
  //   }
  // },
  watch: {
    region: {
      handler (arr) {
        this.areaValue = this.regionRange.map((v, i) => {
          return v[arr[i]] && v[arr[i]].areaName
        }).filter(v => v).join('/')
      },
      immediate: true
    }
  },
  methods: {
    async getAreaList (column, id) {
      let arr = []
      arr[0] = await getAreaList({id: 0})
      arr[1] = await getAreaList({id: arr[0][0].areaCode})
      arr[2] = await getAreaList({id: arr[1][0].areaCode})
      this.regionRange = arr
      const index = arr[2].findIndex(v => v.areaCode === this.addr.areaCode)
      if (index > -1) {
        this.region = ['0', '0', index]
      }
    },
    columnChange (e) {
      //  暂时写死，不动态改变
      // const { column, value } = e.mp.detail
    },
    regionChange (e) {
      this.region = e.mp.detail.value
    },
    chooseLocation () {
      wx.chooseLocation({
        success: res => {
          const { name, address, latitude, longitude } = res
          this.addr.areaCode = address
          console.log(name, address, latitude, longitude)
        },
        fail (err) { console.error(err) }
      })
    },
    switchChange (e) {
      this.addr.defaultStatus = e.mp.detail.value ? '0' : '1'
    },
    clearInput (key) {
      this.addr[key] = ''
    },
    saveAddr () {
      const addr = this.addr
      console.log(addr.custName)
      if (!addr.custName.trim()) {
        this.dialog.showToast('请填写姓名')
        return false
      }
      if (!valid.isPhone(addr.phone)) { return }

      if (!this.areaValue.trim()) {
        this.dialog.showToast('请先选择地区')
        return false
      }
      if (!addr.address.trim()) {
        this.dialog.showToast('详细地址')
        return false
      }
      this.loading = true
      saveAddress({
        custName: this.addr.custName,
        phone: this.addr.phone,
        address: this.addr.address,
        defaultStatus: this.addr.defaultStatus,
        areaCode: this.regionRange[2][this.region[2]].areaCode
      }).then(v => {
        this.navigateBack()
      }).finally(() => {
        this.loading = false
      })
    }
  },
  beforeMount () {
    if (!this.cookie.isLogin()) {
      wx.navigateTo({ url: '/pages/login/main' })
    }
  },
  mounted () {
    const { addressId } = this.$root.$mp.query
    if (addressId) {
      getAddress({addressId}).then(data => {
        this.addr = data
        const index = this.regionRange[2].findIndex(v => v.areaCode === data.areaCode)
        this.region = ['0', '0', index]
      })
    }
    this.getAreaList()
  }
}
</script>
<style lang="less">
  .addr-box {
    ul{
      padding-left: 15px;
      li{
        padding: 12px 15px 11px 0;
        line-height: 32px;
        border-bottom: 1px solid #dfdfdf;
        .label{
          width: 85px;
        }
        .input, .input:focus{
          height: 32px;
          line-height: 32px;
        }
        .icon-address{
          width: 21px;
          height: 21px;
          margin-right: 9px;
          margin-top:3px;
        }
        .close{
          width: 15px;
          height: 15px;
          line-height: 12px;
          margin-top: 7px;
          text-align: center;
          background-color: #dbdbdc;
          border-radius: 50%;
          font-size: 18px;
          color:#fff;
        }
        .hover-close{
          background-color: #ccc;
        }
      }
    }
    .btn-full-box{
      padding: 20px 15px;
    }
  }
</style>